<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xFio - {{.title}}</title>
    <link href="/static/vendor/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/style.css">
    <link href="/static/vendor/fontawesome/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="sidebar">
        <div class="sidebar-header">
            <h3><span class="brand-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" role="img" focusable="false" class="xfio-logo-svg">
                    <circle cx="12" cy="12" r="11" class="disk" />
                    <path d="M13.5 2L6 14h5.2L10.5 22 18 10h-5.2L13.5 2z" class="bolt" />
                </svg>
            </span><span class="brand-word">x<span class="brand-f">F</span>io</span></h3>
            <p>分布式fio性能测试控制中心</p>
        </div>
        <div class="sidebar-nav">
            <nav class="nav flex-column">
                <a class="nav-link" href="/"><i class="fas fa-home"></i> 首页</a>
                <a class="nav-link" href="/workers"><i class="fas fa-server"></i> 节点管理</a>
                <a class="nav-link" href="/test-cases"><i class="fas fa-file-code"></i> 测试用例</a>
                <a class="nav-link" href="/tasks"><i class="fas fa-tasks"></i> 任务管理</a>
                <a class="nav-link active" href="/results"><i class="fas fa-chart-bar"></i> 结果分析</a>
            </nav>
        </div>
    </div>

    <div class="main-content">
        <div class="page-header">
            <h2><i class="fas fa-database me-2"></i> {{.title}}</h2>
            <button class="btn btn-outline-primary" id="refreshResultsBtn">
                <i class="fas fa-sync-alt me-1"></i>刷新
            </button>
        </div>

        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card text-center bg-primary text-white">
                    <div class="card-body">
                        <h5 id="totalTests">0</h5>
                        <p class="mb-0">总测试数</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center bg-success text-white">
                    <div class="card-body">
                        <h5 id="avgIOPS">0</h5>
                        <p class="mb-0">平均IOPS</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center bg-info text-white">
                    <div class="card-body">
                        <h5 id="avgLatency">0 ms</h5>
                        <p class="mb-0">平均延迟</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center bg-warning text-white">
                    <div class="card-body">
                        <h5 id="avgBandwidth">0 MB/s</h5>
                        <p class="mb-0">平均带宽</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="fas fa-filter text-primary me-2"></i>筛选条件</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="testCaseFilter" class="form-label">测试用例</label>
                                <select class="form-select" id="testCaseFilter">
                                    <option value="">全部测试用例</option>
                                    <!-- 选项将通过JavaScript动态加载 -->
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="workerFilter" class="form-label">Worker</label>
                                <select class="form-select" id="workerFilter">
                                    <option value="">全部Worker</option>
                                    <!-- 选项将通过JavaScript动态加载 -->
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="dateRangeFilter" class="form-label">日期范围</label>
                                <select class="form-select" id="dateRangeFilter">
                                    <option value="">全部时间</option>
                                    <option value="today">今天</option>
                                    <option value="week">本周</option>
                                    <option value="month">本月</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <button class="btn btn-primary" onclick="applyFilters()">
                                    <i class="fas fa-filter me-1"></i>应用筛选
                                </button>
                                <button class="btn btn-outline-secondary" onclick="clearFilters()">
                                    <i class="fas fa-times me-1"></i>清除筛选
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-light d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class="fas fa-table text-primary me-2"></i> 测试结果</h5>
                        <div class="d-flex gap-2">
                            <select class="form-select form-select-sm" id="exportFormat" style="width: auto;">
                                <option value="csv">CSV</option>
                                <option value="json">JSON</option>
                                <option value="xlsx">Excel</option>
                            </select>
                            <button class="btn btn-sm btn-outline-success" onclick="exportResults()">
                                <i class="fas fa-download me-1"></i>导出
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover" id="resultsTable">
                                <thead class="table-dark">
                                    <tr>
                                        <th><input type="checkbox" id="selectAll" title="全选"></th>
                                        <th>ID</th>
                                        <th>任务ID</th>
                                        <th>Worker</th>
                                        <th>测试用例</th>
                                        <th>状态</th>
                                        <th>读IOPS</th>
                                        <th>写IOPS</th>
                                        <th>平均延迟(ms)</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- 结果数据将通过JavaScript动态加载 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-header bg-light">
                        <h6 class="mb-0"><i class="fas fa-chart-line text-primary me-2"></i>IOPS对比</h6>
                    </div>
                    <div class="card-body">
                        <canvas id="iopsChart" width="400" height="300"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-header bg-light">
                        <h6 class="mb-0"><i class="fas fa-clock text-primary me-2"></i>延迟对比</h6>
                    </div>
                    <div class="card-body">
                        <canvas id="latencyChart" width="400" height="300"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-header bg-light">
                        <h6 class="mb-0"><i class="fas fa-tachometer-alt text-primary me-2"></i>带宽对比</h6>
                    </div>
                    <div class="card-body">
                        <canvas id="bandwidthChart" width="400" height="300"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer bg-light mt-5 py-4">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <p class="mb-0">&copy; 2025 xfio - 分布式fio性能测试系统</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="/static/vendor/bootstrap.bundle.min.js"></script>
    <script src="/static/vendor/chartjs/chart.min.js"></script>
    <script src="/static/js/results.js"></script>
</body>
</html>